<?php
session_start();
if (empty($_SESSION['username'])) {
    echo '<script type="text/javascript">window.location.href="../index.php";</script>';
} else {
    $now = time();
    if ($now > $_SESSION['expire']) {
        session_destroy();
        echo '<script type="text/javascript">var r=confirm("Session expire (30 mins)!"); if(r==true){window.location.href="../index.php";}else{window.location.href="index.php";}</script>';
    } else {
        require '../model-db-connection/config.php';
        $config = require '../model-db-connection/qrc_conf.properties.php';
    }
}
?>
<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>QRC - Building Management</title>
        <link rel="icon" type="image/ico" href="../images/favicon.ico" />
        <!-- Bootstrap Core CSS -->
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../css/jquery.toastmessage.css" rel="stylesheet">

        <!-- MetisMenu CSS -->
        <link href="../css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="../css/sb-admin-2.css" rel="stylesheet">
        <!-- Custom Fonts -->
        <link href="../font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="../css/minoral.css">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            .spinner {
                width: 70px;
                text-align: center;
            }
            #spinnerCE {
                width: 70px;
                text-align: center;
            }
            #spinnerCE > div {
                width: 18px;
                height: 18px;
                background-color: #333;

                border-radius: 100%;
                display: inline-block;
                -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
                animation: bouncedelay 1.4s infinite ease-in-out;
                /* Prevent first frame from flickering when animation starts */
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
            }
            .spinner > div {
                width: 18px;
                height: 18px;
                background-color: #333;

                border-radius: 100%;
                display: inline-block;
                -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
                animation: bouncedelay 1.4s infinite ease-in-out;
                /* Prevent first frame from flickering when animation starts */
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
            }
            #spinnerCE .bounce1 {
                -webkit-animation-delay: -0.32s;
                animation-delay: -0.32s;
            }

            #spinnerCE .bounce2 {
                -webkit-animation-delay: -0.16s;
                animation-delay: -0.16s;
            }
            .spinner .bounce1 {
                -webkit-animation-delay: -0.32s;
                animation-delay: -0.32s;
            }

            .spinner .bounce2 {
                -webkit-animation-delay: -0.16s;
                animation-delay: -0.16s;
            }
            @-webkit-keyframes bouncedelay {
                0%, 80%, 100% { -webkit-transform: scale(0.0) }
                40% { -webkit-transform: scale(1.0) }
            }

            @keyframes bouncedelay {
                0%, 80%, 100% { 
                    transform: scale(0.0);
                    -webkit-transform: scale(0.0);
                } 40% { 
                    transform: scale(1.0);
                    -webkit-transform: scale(1.0);
                }
            }

        </style>
    </head>

    <body>

        <div id="wrapper">

            <!-- Navigation -->
            <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index-dashboard.php"><img src="../images/qrc_logo.JPG" height="30"/> QRC-Building Management</a>
                </div>
                <!-- /.navbar-header -->

                <ul class="nav navbar-top-links navbar-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-user fa-fw"></i> <?=$_SESSION['username']; ?> <i class="fa fa-caret-down"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                            </li>
                            <li><a href="../setting-page/index-setting.php"><i class="fa fa-gear fa-fw"></i> Settings</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#" id="logout_click"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                            </li>
                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                    <!-- /.dropdown -->
                </ul>
                <!-- /.navbar-top-links -->

                <div class="navbar-default sidebar" role="navigation">
                    <div class="sidebar-nav navbar-collapse">
                        <div id="left-menu-load"></div>
                    </div>
                    <!-- /.sidebar-collapse -->
                </div>
                <!-- /.navbar-static-side -->
            </nav>

            <div id="page-wrapper">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">Projects (โครงการ)</h1>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-desktop"></i> Projects (โครงการ)
                            </li>
                        </ol>
                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <!-- /.row -->
                <div class="row" id="load_all_status">
                </div>
                <!-- /.row -->
                <div class="row">
                    <div class="col-lg-10" id="create_edit_panel">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-bar-chart-o fa-fw"></i> Create/Edit Projects (สร้าง/แก้ไข โครงการ)
                                <div class="pull-right">
                                    <button type="button" id="save_create_panel" class="btn btn-primary btn-xs" style="width: 100px" data-toggle="dropdown">บันทึก</button>
                                    <button type="button" id="close_create_panel" class="btn btn-default btn-xs" style="width: 100px" data-toggle="dropdown">ปิด</button>
                                </div>
                            </div>
                            <!-- /.panel-heading -->
                            <div class="panel-body" >
                                <div id="loading_ce_form" >
                                    <div id="spinnerCE">
                                        <div class="bounce1"></div>
                                        <div class="bounce2"></div>
                                        <div class="bounce3"></div>
                                    </div>

                                </div>
                            </div>
                            <!-- /.panel-body -->
                        </div>
                        <!-- /.panel -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-10" id="search_panel">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-bar-chart-o fa-fw"></i> Search Projects (ค้นหาโครงการ)
                                <div class="pull-right">
                                    <button type="button" id="search_project_button" class="btn btn-primary btn-xs" style="width: 100px" data-toggle="dropdown">ค้นหา</button>
                                    <button type="button" id="close_search_panel" class="btn btn-default btn-xs" style="width: 100px" data-toggle="dropdown">ปิด</button>
                                </div>
                            </div>
                            <!-- /.panel-heading -->
                            <div class="panel-body" >
                                <div id="loading_search_form" class="table-responsive" >
                                    <div id="spinnerCE">
                                        <div class="bounce1"></div>
                                        <div class="bounce2"></div>
                                        <div class="bounce3"></div>
                                    </div>

                                </div>
                            </div>
                            <!-- /.panel-body -->
                        </div>
                        <!-- /.panel -->
                    </div>
                </div>
                <div class="row" id="project_tbl_content">
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-bar-chart-o fa-fw"></i> All Project (โครงการทั้งหมด)

                                <div class="pull-right">

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                            Actions
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu pull-right" role="menu">
                                            <li><a href="#" id="create_new_project_btn">Create New Projects (สร้างโครงการใหม่)</a>
                                            </li>
                                            <li><a href="#" id="search_project_btn">Search Projects (ค้นหาโครงการ)</a>
                                            </li>
                                        </ul>                                        
                                    </div>

                                </div>
                            </div>
                            <!-- /.panel-heading -->
                            <div class="panel-body">
                                <div class="table-responsive" id="loading_project">
                                    <div class="spinner">
                                        <div class="bounce1"></div>
                                        <div class="bounce2"></div>
                                        <div class="bounce3"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.panel-body -->
                        </div>
                        <!-- /.panel -->
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /#page-wrapper -->


        <!-- jQuery Version 1.11.0 -->
        <script src="../js/jquery-1.11.0.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="../js/bootstrap.min.js"></script>

        <!-- Metis Menu Plugin JavaScript -->
        <script src="../js/plugins/metisMenu/metisMenu.min.js"></script>
        <script src="../js/jquery.toastmessage.js"></script>
        <!-- Custom Theme JavaScript -->
        <script src="../js/sb-admin-2.js"></script>
        <style type="text/css">
            .status {
                padding-top: 2px;
                padding-left: 8px;
                vertical-align: top;
                width: 246px;
                white-space: nowrap;
            }
            .textfield {
                width: 150px;
            }
            label.error {
                background:url("../images/unchecked.gif") no-repeat 0px 0px;
                padding-left: 16px;
                padding-bottom: 2px;
                font-weight: bold;
                color: #EA5200;
            }
            label.checked {
                background:url("../images/checked.gif") no-repeat 0px 0px;
            }
            .success_msg {
                font-weight: bold;
                color: #0060BF;
                margin-left: 19px;
            }
        </style>
        <script>
            var createOrEditState = "Create"
            $(document).ready(function() {
                //Adding more timeout
                interactiveTimeout();

                $("#search_panel").hide();

                updateUpperMenu();

                $("#save_create_panel").click(function() {
                    if ($("#project_name").val() == "") {
                        $("#project_name_div").addClass("has-error");
                    } else {
                        $("#project_name_div").removeClass("has-error");
                    }
                    if ($("#project_type_select").val() == 0) {
                        $("#project_type_div").addClass("has-error");
                    } else {
                        $("#project_type_div").removeClass("has-error");
                    }

                    if ($("#project_status_select").val() == 0) {
                        $("#project_status_div").addClass("has-error");
                    } else {
                        $("#project_status_div").removeClass("has-error");
                    }

                    if ($("#project_owner_select").val() == 0) {
                        $("#project_owner_div").addClass("has-error");
                    } else {
                        $("#project_owner_div").removeClass("has-error");
                    }
                    if ($("#project_customer_select").val() == 0) {
                        $("#project_customer_div").addClass("has-error");
                    } else {
                        $("#project_customer_div").removeClass("has-error");
                    }
                    if ($("#project_name").val() != "" && $("#project_type_select").val() != 0 && $("#project_status_select").val() != 0 && $("#project_owner_select").val() != 0 && $("#project_customer_select").val() != 0) {
                        $("#project_customer_div").removeClass("has-error");
                        $("#project_owner_div").removeClass("has-error");
                        $("#project_status_div").removeClass("has-error");
                        $("#project_type_div").removeClass("has-error");
                        $("#project_name_div").removeClass("has-error");
                        var data = "?project_code=" + $("#project_code").val()
                                + "&project_name=" + $("#project_name").val()
                                + "&project_type=" + $("#project_type_select").val()
                                + "&project_status=" + $("#project_status_select").val()
                                + "&project_owner=" + $("#project_owner_select").val()
                                + "&project_customer=" + $("#project_customer_select").val()
                                + "&project_manager=" + $("#project_manager").val()
                                + "&project_foreman=" + $("#project_foreman").val()
                                + "&supervisor_control=" + $("#supervisor_control").val()
                                + "&qa_inspectors=" + $("#qa_inspectors").val()
                                + "&address_location=" + $("#address_location").val()
                                + "&project_remark=" + $("#project_remark").val()
                                + "&team_owner=" + $("#team_owner").val();
                        if (createOrEditState == "Create") {

                            interactiveTimeout();

                            var jqxhr = $.post("../model/SavingProject.php" + data);
                            jqxhr.success(function(reslut) {
                                if (reslut == 1) {
                                    clearProjectInsertFields();
                                    //$('html,body').animate({scrollTop: $('#project_tbl_content').offset().top}, 'slow');
                                    $("#create_edit_panel").hide();
                                    $(".spinner").show();
                                    $("#loading_project").load("project_table_result.php?search_condition=search_all", function() {
                                        $(".spinner").hide();
                                    });
                                    updateUpperMenu();
                                    $().toastmessage('showSuccessToast', 'บันทึกเรียบร้อยแล้ว');
                                } else {
                                    $().toastmessage('showErrorToast', 'ไม่สามารถบันทึกได้');
                                }
                            });
                            jqxhr.error(function(resultFail) {
                                $().toastmessage('showWarningToast', "Cannot connect server with: " + resultFail);
                            });
                        } else {
                            if ($("#project_remark").val() == "") {
                                $().toastmessage('showNoticeToast', 'กรุณาใส่ Remark');
                            } else {

                                interactiveTimeout();

                                var jqxhr = $.post("../model/EditProject.php" + data);
                                jqxhr.success(function(result) {
                                    if (result == 1) {
                                        clearProjectInsertFields();
                                        $('html,body').animate({scrollTop: $('#project_tbl_content').offset().top}, 'slow');
                                        $("#create_edit_panel").hide();
                                        $(".spinner").show();
                                        $("#loading_project").load("project_table_result.php?search_condition=search_all", function() {
                                            $(".spinner").hide();
                                        });
                                        $().toastmessage('showSuccessToast', 'แก้ไขเรียบร้อยแล้ว');
                                        createOrEditState = "Create"
                                    } else {
                                        $().toastmessage('showErrorToast', 'ไม่สามารถแก้ไขได้');
                                        //alert("Cannot Edit Project");
                                    }
                                });
                                jqxhr.error(function(resultFail) {
                                    $().toastmessage('showWarningToast', "Cannot connect server with: " + resultFail);
                                });
                            }
                        }
                    }
                });
                var jqxhr = $.post("project_table_result.php?search_condition=search_all");
                jqxhr.success(function(data) {
                    $("#loading_project").html(data);
                    $(".spinner").hide();
                });
                jqxhr.error(function() {
                    alert("Cannot load page");
                });
                $("#create_edit_panel").hide();
                $("#create_new_project_btn").click(function() {
                    createOrEditState = "Create";
                    $("#create_edit_panel").show();
                    $("#spinnerCE").show();
                    var jqxhr = $.post("create-edit_form.php");
                    jqxhr.success(function(cedata) {
                        $("#loading_ce_form").html(cedata);
                        $("#spinnerCE").hide();
                        $('html,body').animate({scrollTop: $('#create_edit_panel').offset().top}, 'slow');
                    });
                    jqxhr.error(function() {
                        alert("Cannot load page");
                    });
                });
                $("#search_project_btn").click(function() {
                    $("#search_panel").show();
                    $(".spinner").show();
                    var jqxhr = $.post("search-form-page.php");
                    jqxhr.success(function(cedata) {
                        $("#loading_search_form").html(cedata);
                        $(".spinner").hide();
                        $('html,body').animate({scrollTop: $('#search_panel').offset().top}, 'slow');
                    });
                    jqxhr.error(function() {
                        alert("Cannot load page");
                    });
                });
                $("#project_loading_icon").hide();
                $("#close_search_panel").click(function() {
                    $.ajax({
                        type: "POST",
                        url: "project_table_result.php?search_condition=search_all",
                        beforeSend: function(msg) {
                            $("#project_loading_icon").show();
                            $("#loading_search_form").empty();
                            $("#search_panel").hide();
                        },
                        success: function(msg) {
                            $("#loading_project").html(msg);
                            $("#project_loading_icon").hide();

                        }
                    });
                });
                $("#close_create_panel").click(function() {
                    $("#create_edit_panel").hide();
                    $("#loading_ce_form").empty();
                    $('html,body').animate({scrollTop: $('.navbar').offset().top}, 'slow');
                });
                $("#logout_click").click(function() {
                    var jqxhr = $.post("../model/LogoutDesSession.php");
                    jqxhr.success(function(data) {
                        alert(data);
                        window.location.assign("../index.php")
                    });
                    jqxhr.error(function() {
                        alert("ไม่สามารถติดต่อกับ Server ได้");
                    });
                });
                $("#search_project_button").click(function() {

                    var projectCodeSearch = $("#project_code_search").val();
                    var projectNameSearch = $("#project_name_search").val();
                    var projectTypeSearch = $("#project_type_search").val();
                    var projectStatusSearch = $("#project_status_search").val();
                    var projectOwnerSearch = $("#project_owner_search").val();
                    var projectCustomerSearch = $("#project_customer_search").val();
                    var startSearchDate = $("#start_search_date").val();
                    var endSearchDate = $("#end_search_date").val();
                    var searchLimit = $("#project_limit_search").val();
                    if (!$.trim(projectCodeSearch).length &&
                            !$.trim(projectNameSearch).length &&
                            !$.trim(projectTypeSearch).length &&
                            !$.trim(projectStatusSearch).length &&
                            !$.trim(projectOwnerSearch).length &&
                            !$.trim(projectCustomerSearch) &&
                            !$.trim(startSearchDate).length &&
                            !$.trim(endSearchDate).length &&
                            searchLimit == 100) {
                        //window.location.assign("index-projects-search-result.php?search_condition=search_all");
                        $(".spinner").show();
                        interactiveTimeout();
                        $("#loading_project").load("project_table_result.php?search_condition=search_all", function() {
                            $(".spinner").hide();
                            $('html,body').animate({scrollTop: $('#project_tbl_content').offset().top}, 'slow');
                        });
                    } else {
                        if (startSearchDate != "" && endSearchDate == "") {
                            $().toastmessage('showWarningToast', "Please enter date");
                        }
                        else if (startSearchDate == "" && endSearchDate != "") {
                            $().toastmessage('showWarningToast', "Please enter start date");
                        }
                        else {
                            var dateAr = endSearchDate.split('-');
                            endSearchDate = dateAr[0] + '-' + dateAr[1] + '-' + (parseInt(dateAr[2]) + 1);
                            $(".spinner").show();
                            //alert(searchLimit);
                            interactiveTimeout();
                            $("#loading_project").load("project_table_result.php?search_condition=search_criteria&projectCodeSearch=" + projectCodeSearch + "&projectNameSearch=" + projectNameSearch + "&projectTypeSearch=" + projectTypeSearch + "&projectStatusSearch=" + projectStatusSearch + "&projectOwnerSearch=" + projectOwnerSearch + "&projectCustomerSearch=" + projectCustomerSearch + "&startSearchDate=" + startSearchDate + "&endSearchDate=" + endSearchDate + "&searchLimit=" + searchLimit, function() {
                                $(".spinner").hide();
                                $('html,body').animate({scrollTop: $('#project_tbl_content').offset().top}, 'slow');
                            });
                            //window.location.assign("index-projects-search-result.php?search_condition=search_criteria&projectCodeSearch=" + projectCodeSearch + "&projectNameSearch=" + projectNameSearch + "&projectTypeSearch=" + projectTypeSearch + "&projectStatusSearch=" + projectStatusSearch + "&projectOwnerSearch=" + projectOwnerSearch + "&projectCustomerSearch=" + projectCustomerSearch + "&startSearchDate=" + startSearchDate + "&endSearchDate=" + endSearchDate);
                        }
                    }


                });
            });
            function deleteProject(projectCode) {


                if (confirm("Are you sure?"))
                {
                    $(".spinner").show();
                    var jqxhr = $.post("../model/DeleteProject.php?project_code=" + projectCode);
                    jqxhr.success(function(data) {
                        if (data == 1) {
                            setTimeout(function()
                            {
                                interactiveTimeout();
                                //$('html,body').animate({scrollTop: $('#project_tbl_content').offset().top}, 'slow');
                                $("#loading_project").load("project_table_result.php?search_condition=search_all", function() {
                                    $(".spinner").hide();
                                });
                                updateUpperMenu();
                                $().toastmessage('showSuccessToast', 'ลบข้อมูลเรียบร้อยแล้ว');
                            }
                            , 100);
                        } else {
                            $().toastmessage('showErrorToast', 'ไม่สามารถลบข้อมูลได้');
                        }
                    });
                    jqxhr.error(function(data) {
                        $().toastmessage('showWarningToast', "Cannot connect server with: " + data);
                    });
                }
                else
                {
                    e.preventDefault();
                }

            }
            function clearProjectInsertFields() {
                $("#project_code").val("");
                $("#project_name").val("")
                $("#project_type_select").val("0")
                $("#project_status_select").val("0")
                $("#project_owner_select").val("0")
                $("#project_customer_select").val("0")
                $("#project_manager").val("")
                $("#project_foreman").val("")
                $("#supervisor_control").val("")
                $("#qa_inspectors").val("")
                $("#address_location").val("")
                $("#project_remark").val("")
                $("#team_owner").val("");
            }
            function editProject(projectCode) {
                createOrEditState = "Edit";
                $("#create_edit_panel").show();
                $("#loading_ce_form").load("create-edit_form.php", function() {
                    $("#spinnerCE").hide();
                    $('html,body').animate({scrollTop: $('#create_edit_panel').offset().top}, 'slow');
                });
                var millisecondsToWait = 500;
                setTimeout(function() {
                    var jqxhr = $.post("../model/GetAllProjectForEdit.php?project_code=" + projectCode);
                    jqxhr.success(function(data) {
                        obj = JSON.parse(data);
                        $("#projectCodeShowForEdit").html(obj.project_code);
                        $("#projectCode").hide();
                        $("#project_code").val(obj.project_code);
                        $("#project_name").val(obj.project_name);
                        $("#project_type_select").val(obj.project_type);
                        $("#project_status_select").val(obj.project_status);
                        $("#project_owner_select").val(obj.project_owner);
                        $("#project_customer_select").val(obj.customer_name);
                        $("#project_manager").val(obj.project_manager);
                        $("#project_foreman").val(obj.project_foreman);
                        $("#supervisor_control").val(obj.supervisor_control);
                        $("#team_owner").val(obj.team_owner);
                        $("#qa_inspectors").val(obj.quality_inspectors);
                        $("#project_remark").val(obj.remark);
                        $("#created_date").val(obj.created_date_time);
                        $("#last_update").val(obj.updated_date_time);
                        $("#address_location").val(obj.address_location);
                    });
                    jqxhr.error(function(data) {
                        window.location.replace("error.php?error_msg=" + data);
                    });
                }, millisecondsToWait);
            }
            function loadProjectOrder() {
                window.location.replace("../assign-page/index-assign.php");
            }
            function interactiveTimeout() {
                $.post("../model/VerifySessionTimeout.php?timeOut=" +<?= time() ?>);
            }
            function updateUpperMenu() {
                $("#load_all_status").load("../menu-page/load_all_status_page.php", function() {
                    setTimeout(function()
                    {
                        //Update Project
                        $("#update_project_status").load("../menu-page/project_menu_page.php", function() {
                            $(".spinner").hide();
                        });
                        //Update TaskAssignment 
                        $("#update_assign_status").load("../menu-page/taskassign_menu_page.php", function() {
                            $(".spinner").hide();
                        });
                        //Update po inspection 
                        $("#update_poinspection_status").load("../menu-page/poinspection_menu_page.php", function() {
                            $(".spinner").hide();
                        });
                        //Update team member update_team_member_status
                        $("#update_team_member_status").load("../menu-page/teammember_menu_page.php", function() {
                            $(".spinner").hide();
                        });
                        $("#left-menu-load").load("../leftmenu-page/index-left-menu.php");
                    }
                    , 100);
                });

            }
        </script>
    </body>

</html>
